渐变 gradient

线性渐变 linear-gradient

渐变线

在渐变容器中，穿过容器中心点和颜色停止点连接在一起的线称为渐变线。在一个笛卡尔坐标系中，y轴正方向为0deg(to top)，x轴正方向为90deg(to right)，y轴负方向为180deg(to bottom)，x轴负方向为270deg(to left)

1	background-image: linear-gradient(0deg, red, white);

渐变角度

角度简写对应的角度值

to	deg	turn
to top	0deg	1turn
to right	90deg	.25turn
to bottom	180deg	.5turn
to left	270deg	.75turn
to top right	45deg	.125turn
to bottom right	135deg	.375turn
to bottom left	225deg	.625turn
to top left	315deg	.875turn

渐变线长度

通常，浏览器会计算渐变线的长度，以覆盖整个填充容器，计算公式为:

1	abs(W * sin(A)) + abs(H * cos(A))

其中: W是渐变容器的宽度，H是渐变容器的高度，A是渐变角度

渐变色节点（Color stops）

渐变色的每一个颜色可以这样定义：

1	<color> [<percentage> \| <length>]

默认情况下是均分

在样式中可以指定各项颜色的线长:

1	background-image: linear-gradient(.125turn, red 30%, pink 70%, white);

其中，red从起始位置到整个渐变线的30%位置，pink从起始位置到整个渐变线的70%位置，white未指定则从0%到100%位置。

使用此特性，可以做出各种精美的纹理:

注意，如果后面的颜色占比小于前面颜色占比，则会出现明显的分界线:

渐变透明度(Transparency)

透明度还支持透明渐变，这对于制作一些特殊的效果是相当有用的。

1	background-image: linear-gradient(.125turn, rgba(255,0,0,.5) 30%, rgba(255,255,0,.5) 70%, white), url(./bg.jpg);

可累加的线性渐变背景图

线性渐变支持累加效果，不过注意为前面的颜色设置透明度，否则是看不到效果的。

1 2	background: linear-gradient(.125turn, rgba(255,0,0,.6) 30%, rgba(255,255,0,.4) 60%), linear-gradient(green 40%, blue 80%, white);

可重复的线性渐变

使用可重复的线性渐变可轻松做出各种好看的纹理、进度条等。

1	background: repeating-linear-gradient(135deg, #000 0, #000 .25em, #0092b7 0, #0092b7 .5em);

径向渐变 radial-gradient

径向渐变中，默认渐变线为容器对角线，如果是外接一个椭圆，则为长轴与短轴所接矩形的对角线，如果是一个完美的正方形，则为外接圆的半径。

径向渐变方式主要由<size>、<position>、<shape>这三个参数影响，分别控制椭圆的圆心、形状和大小。

其渐变范围（渐变结束线）示意如下图，默认既不是按照宽度来的，也不是按照高度来的，是按照最远边角距离作为渐变结束线的:

1	background: radial-gradient(yellow,red);

指定渐变形状

形状	说明
circle	圆形
ellipse	椭圆形

圆形 circle

1	background: radial-gradient(circle, yellow, red);

椭圆形 ellipse

1	background: radial-gradient(ellipse, yellow, red);

指定渐变起始点位置

起始点位置可以有如下设置

起始点位置	说明
at top	位于上方
at right	位于右方
at bottom	位于下方
at left	位于左方
at top right	位于右上方
at bottom right	位于右下方
at bottom left	位于左下方
at top left	位于左上方

如:

1	background: radial-gradient(300px circle at top left,yellow,red);

指定渐变终止点位置

radial-gradient径向渐变支持4个关键字可以指定渐变终止点位置:

关键字	描述
`closest-side`	渐变中心距离容器最近的边作为终止位置。
`closest-corner`	渐变中心距离容器最近的角作为终止位置。
`farthest-side`	渐变中心距离容器最远的边作为终止位置。
`farthest-corner`	渐变中心距离容器最远的角作为终止位置。

1	background: radial-gradient(farthest-side circle,yellow,red);

也可以使用长度单位指定渐变线的长度:

1	background: radial-gradient(100px circle,yellow,red);

如果是椭圆，可以指定长轴和短轴的长度:

1	background: radial-gradient(300px 100px ellipse,yellow,red);

指定渐变颜色节点

后面的参数可以指定渐变颜色节点

1	background: radial-gradient(closest-side circle, yellow, orange, red, white);

指定颜色节点位置

1	background: radial-gradient(300px 100px ellipse,yellow 10%,red);

可累加的径向渐变背景图

1
2
3

background: radial-gradient(50px 100px ellipse,
    transparent 40px, yellow 41px, red 49px, transparent 50px),
  radial-gradient(30px circle, red, red 29px, transparent 30px);

渐变背景尺寸控制

可以通过background-size属性控制背景的尺寸大小。注意不要设置background-repeat: no-repeat;

width: 100%;
height: 200px;
background: radial-gradient(5px circle, transparent 4px, yellow 5px, red 6px, transparent 7px),
	radial-gradient(3px circle, red, red 3px, transparent 4px);
background-color: rgba(255,255,0,.3);
background-size: 25px 50px;

可重复的径向渐变

1 2	background: repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px); border-radius: 50%;

一些简单的应用

制作水纹特效

.radial-gradient {
  width: 200px; height: 100px;
  background: red;
  position: relative;
}
.radial-gradient:after {
  content: '';
  position: absolute;
  height: 10px;
  left:0 ; right: 0;
  bottom: -10px;
  background: radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px);
  background-size: 20px 10px;
}

制作唱片特效

来自 https://codepen.io/thebabydino/embed/HjJlL

.radial-gradient {
  position: relative;
  width: 262px; height: 262px;
  border-radius: 50%;
  background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
  background-size: 50% 100%, 100% 50%, 100% 100%;
}
.radial-gradient:after {
  position: absolute;
  top: 50%; left: 50%;
  margin: -35px;
  border: solid 1px #d9a388;
  width: 68px; height: 68px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
  background: #b5ac9a;
  content: '';
}

制作镂空特效

.radial-gradient {
  width: 100px; height: 100px;
  border: 50px solid;
  border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
}

制作调色板

.board {
  width: 200px;
  height: 200px;
  background: 
    linear-gradient(36deg, #272b66 42.34%, transparent 42.34%),
    linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%),
    linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
    linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0, 
    linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
    linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
    linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%, 
    #43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  border-radius: 50%;
}

剪裁 clip

clip (不推荐使用)

clip的优势：clip 属性是CSS中出现的第一种剪裁。clip是运行在浏览器中的，它可能会一直有效。而浏览器对它的支持是非常强大的：几乎是有史以来的每一个浏览器。

clip的劣势:clip 只对绝对定位的元素有效，clip 只能用于矩形，即rect()函数。

格式:

1	clip: rect(top, right, bottom, left);

如:

1
2
3

<div class="mode">
  <div class="bg"></div>
</div>

.mode {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg {
  width: 300px;
  height: 300px;
  background: repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
  border-radius: 50%;
  position: absolute;
  clip: rect(0,200px,200px,0);
}